<template>
    <mian-layout>
        <el-descriptions labelClassName="mysdItemLable" title="运营活动详情" :column="4" border>
            <el-descriptions-item label="运营活动名称" span="4">{{oDetail.activityName}}</el-descriptions-item>
            <el-descriptions-item label="活动展示图片" span="2">
                <div class="imgItemBox">
                    <a :href="oDetail.activityImg" target="_black"><img :src="oDetail.activityImg"/></a>
                </div>
            </el-descriptions-item>
            <el-descriptions-item label="运营活动描述" span="4">{{oDetail.activityDesc}}</el-descriptions-item>
            <el-descriptions-item label="运营活动规则" span="4">{{oDetail.activityRule}}</el-descriptions-item>
            <el-descriptions-item label="活动开始时间" span="2">{{oDetail.activityStartTime}}</el-descriptions-item>
            <el-descriptions-item label="活动结束时间" span="2">{{oDetail.activityEndTime}}</el-descriptions-item>
            <el-descriptions-item label="活动状态" span="4">
                <span v-if="oDetail.activityStatus==1" style="color:red">未开始</span>
                <span v-else-if="oDetail.activityStatus==2" style="color:red">进行中</span>
                <span v-else-if="oDetail.activityStatus==3" style="color:red">已结束</span>
            </el-descriptions-item>
        </el-descriptions>
        <br/>
        <el-descriptions labelClassName="mysdItemLable" title="活动数据" :column="4" border>
            <el-descriptions-item label="参加活动累计用户数">{{oDetail.participantNum}}</el-descriptions-item>
            <el-descriptions-item label="已领取碎片用户数">{{oDetail.receiveFragmentNum}}</el-descriptions-item>
            <el-descriptions-item label="已合成卡片的用户数">{{oDetail.composeCardNum}}</el-descriptions-item>
            <el-descriptions-item label="已锻造NFT的用户数">{{oDetail.bornNFTNum}}</el-descriptions-item>
        </el-descriptions>
        <br/>
        <div class="el-descriptions__header">
            <div class="el-descriptions__title">活动卡片</div>
            <div class="el-descriptions__extra"></div>
        </div>
        <my-table :loading="loading" :lists="tableData" @selectionChange="tableSelect" @pageChange="handleChange" :showCheck="true" :sequence="true" :page='page' selectKey="all">       
            <el-table-column property="cardName" label="卡片名称" align='left'></el-table-column>
            <!-- <el-table-column property="" label="卡片图片">
                <template slot-scope="scope">
                    <div class="cdimgbox">
                        <img :src="scope.row.cardImg" alt="">
                    </div>
                </template>
            </el-table-column> -->
            <el-table-column :show-overflow-tooltip="true" property="authorName" label="创作者" align='center'></el-table-column>
            <el-table-column :show-overflow-tooltip="true" property="cardDesc" label="卡片描述" align='left'></el-table-column>
            <el-table-column :show-overflow-tooltip="true" property="valueAnalysis" label="卡片价值" align='left' width="100px"></el-table-column>
            <!-- <el-table-column property="timestamp" label="创建时间" align='center' width="180px">
                <template slot-scope="scope">
                    <span>{{scope.row.createTime}}</span>
                </template>
            </el-table-column> -->
        </my-table>

        <div style="text-align: center; padding-top:30px">
            <my-back type="info" :reGetDataFlag="true">返回</my-back>
            <el-button type="success" plain icon="el-icon-edit" @click="goDetail">修改</el-button>
        </div>
    </mian-layout>
</template>
<script>
import {mapGetters} from "vuex"
import myTable from '@/components/public/myTable';
import myBack from '@/components/public/myBack.vue'
import {
  get_activity_detail,
  get_card_for_aid
} from '@/api/collext'
export default {
    components:{
      myTable,
      myBack
    },
    data(){
        return{
            id:'',
            oDetail:{},
            sceneNames:[],
            page:{
                pageSize:8,
                pageIndex:1,
			    total:0,
            },
            loading:true,
            tableData:[],
            multipleSelectionIds:[],
        }
    },
    computed:{
        ...mapGetters({
            'userInfo':'user/userInfo'
        })
    },
    created(){
        this.id = this.$route.params.id
        this.getData()
        this.getCards()
    },
    methods:{
        async getData(){ 
            const res = await get_activity_detail(this.id)
            this.oDetail = res.data
        },
        async getCards(){
            get_card_for_aid({
                activityId:this.id,
                limit: this.page.pageSize,
                page: this.page.pageIndex,
            }).then(res=>{
                this.loading = false
                this.tableData = res.data
                this.page.total = res.total
            })
        },
        tableSelect(items){
            this.$emit('change',items)
        },
        handleChange(index) {
            this.page.pageIndex = index;
            this.getCards();
        },
        goDetail(){
            sessionStorage.setItem('details',JSON.stringify(this.oDetail))
            this.$router.push(`/activity/add?id=${this.oDetail.activityId}`)
        }
    }
}
</script>
<style lang="scss" scoped>
    .imgItemBox{
        display: flex;
        img{
            display: block;
            height: 100px;
            margin: 0 10px 0 0;
        }
    }
    .imgList{
        display: flex;
        padding: 0 0 10px 0;
        img{
            display: block;
            height: 70px;
        }
        p{
            display: flex;
            align-items: center; 
            padding: 0 0 0 20px;
        }
    }
</style>
<style lang="scss">
    .mysdItemLable{
        width: 150px;
    }
</style>